import React from 'react'
import { Card, Avatar, Space, Typography, Button } from 'antd'
import { UserOutlined, PlusOutlined } from '@ant-design/icons'
import { TreeNode } from '../../store/family'
import clsx from 'clsx'

const { Text } = Typography

interface TreeViewProps {
  tree: TreeNode | null
  onAddMember: (parentId?: number) => void
  onEditMember: (memberId: number) => void
}

const TreeNodeDisplay: React.FC<{
  node: TreeNode
  onAddMember: (parentId?: number) => void
  onEditMember: (memberId: number) => void
}> = ({ node, onAddMember, onEditMember }) => {
  return (
    <div className="flex flex-col items-center">
      <div className="mb-4">
        {/* 配偶信息 */}
        {node.spouse && (
          <div className="flex items-center gap-4 mb-4">
            <Card
              hoverable
              className={clsx(
                'cursor-pointer transition-all duration-300 hover:shadow-lg',
                node.gender === 'MALE' ? 'border-blue-300' : 'border-pink-300'
              )}
              onClick={() => onEditMember(node.id)}
            >
              <Card.Meta
                avatar={
                  <Avatar
                    src={node.avatar}
                    icon={!node.avatar && <UserOutlined />}
                    className="bg-blue-500"
                  />
                }
                title={<Text strong>{node.name}</Text>}
                description={
                  <Space direction="vertical" size={0}>
                    <Text type="secondary">第{node.generation}代</Text>
                    <Text type="secondary">{node.gender === 'MALE' ? '男性' : '女性'}</Text>
                  </Space>
                }
              />
            </Card>

            <div className="text-2xl mx-2">💑</div>

            <Card
              hoverable
              className={clsx(
                'cursor-pointer transition-all duration-300 hover:shadow-lg',
                node.spouse.gender === 'MALE' ? 'border-blue-300' : 'border-pink-300'
              )}
              onClick={() => onEditMember(node.spouse.id)}
            >
              <Card.Meta
                avatar={
                  <Avatar
                    src={node.spouse.avatar}
                    icon={!node.spouse.avatar && <UserOutlined />}
                    className="bg-pink-500"
                  />
                }
                title={<Text strong>{node.spouse.name}</Text>}
                description={
                  <Space direction="vertical" size={0}>
                    <Text type="secondary">配偶</Text>
                    <Text type="secondary">{node.spouse.gender === 'MALE' ? '男性' : '女性'}</Text>
                  </Space>
                }
              />
            </Card>
          </div>
        )}

        {/* 单人信息 */}
        {!node.spouse && (
          <Card
            hoverable
            className={clsx(
              'cursor-pointer transition-all duration-300 hover:shadow-lg',
              node.gender === 'MALE' ? 'border-blue-300' : 'border-pink-300'
            )}
            onClick={() => onEditMember(node.id)}
          >
            <Card.Meta
              avatar={
                <Avatar
                  src={node.avatar}
                  icon={!node.avatar && <UserOutlined />}
                  className={node.gender === 'MALE' ? 'bg-blue-500' : 'bg-pink-500'}
                />
              }
              title={<Text strong>{node.name}</Text>}
              description={
                <Space direction="vertical" size={0}>
                  <Text type="secondary">第{node.generation}代</Text>
                  <Text type="secondary">{node.gender === 'MALE' ? '男性' : '女性'}</Text>
                </Space>
              }
            />
          </Card>
        )}

        <div className="flex justify-center mt-2">
          <Button
            type="dashed"
            icon={<PlusOutlined />}
            size="small"
            onClick={() => onAddMember(node.id)}
          >
            添加子女
          </Button>
        </div>
      </div>

      {/* 递归显示子节点 */}
      {node.children && node.children.length > 0 && (
        <div className="relative">
          <div className="flex gap-8 items-end">
            {node.children.map((child) => (
              <div key={child.id} className="flex-1">
                <div className="flex flex-col items-center">
                  <div className="w-px h-8 bg-gray-300"></div>
                  <div className="h-px w-full bg-gray-300"></div>
                  <TreeNodeDisplay
                    node={child}
                    onAddMember={onAddMember}
                    onEditMember={onEditMember}
                  />
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}

export const FamilyTreeView: React.FC<TreeViewProps> = ({ 
  tree, 
  onAddMember, 
  onEditMember 
}) => {
  if (!tree) {
    return (
      <div className="flex items-center justify-center h-64">
        <Text type="secondary">暂无族谱数据</Text>
      </div>
    )
  }

  return (
    <div className="w-full overflow-auto p-4">
      <div className="min-w-max flex justify-center py-8">
        <div className="flex flex-col items-center">
          <div className="mb-8">
            <Card>
              <Text strong className="text-xl">{tree.name}</Text>
              <br />
              {tree.description && (
                <Text type="secondary">{tree.description}</Text>
              )}
            </Card>
          </div>
          
          {tree.structure && (
            <TreeNodeDisplay
              node={tree.structure}
              onAddMember={onAddMember}
              onEditMember={onEditMember}
            />
          )}
          
          {!tree.structure && (
            <div className="flex flex-col items-center">
              <Text type="secondary" className="mb-4">
                还没有添加家族成员
              </Text>
              <Button
                type="primary"
                icon={<PlusOutlined />}
                onClick={() => onAddMember()}
              >
                添加首位家族成员
              </Button>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}

export default FamilyTreeView